import React from "react";
import { Image } from 'react-vant'; // 引入 Image 组件

const User: React.FC<{ message: string }> = ({ message }) => {
  const styles = {
    container: {
      padding: "10px 20px",
      backgroundColor: "#e0f7fa",
      borderRadius: "10px",
      fontSize: "16px",
      color: "#333",
      display: "flex",
      alignItems: "center",
      gap: "10px", // 新增 gap
    },
    avatar: {
      alignSelf: "flex-end" as const,
      width: "40px",
      height: "40px",
      flexShrink: 0, // 防止被挤压
    },
    wrapper: {
      display: "flex",
      alignItems: "flex-end",
      gap: "10px",
      justifyContent: "flex-end", // 新增样式
    },
  };

  return (
    <div style={styles.wrapper}>
      <div className="User" style={styles.container}>
        {message}
      </div>
      <Image round width="40px" height="40px" src="https://img.yzcdn.cn/vant/cat.jpeg" style={styles.avatar} />
    </div>
  );
};

export default User;